@keyframes hammer {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(30deg)
  }
}

@keyframes shine {
  0%{
    transform: rotate(0deg);
    opacity:1;
  }
  10%{
    transform: rotate(36deg);
    opacity:0;
  }
  20%{
    transform: rotate(72deg);
    opacity:1;
  }
  30%{
    transform: rotate(108deg);
    opacity:0;
  }
  40%{
    transform: rotate(144deg);
    opacity:1;
  }
  50%{
    transform: rotate(180deg);
    opacity:0;
  }
  60%{
    transform: rotate(216deg);
    opacity:1;
  }
  70%{
    transform: rotate(252deg);
    opacity:0;
  }
  80%{
    transform: rotate(288deg);
    opacity:1;
  }
  90%{
    transform: rotate(324deg);
    opacity:0;
  }
  100%{
    transform: rotate(360deg);
    opacity:1;
  }
}

ul{
  list-style: none;
  margin:0;
  padding:0;
}

.smashGoldEgg {
  position: relative;
  width: 100%;
  min-width: 960px;
  background: #ec3838;
  .banner {
    width: 100%;
    height: 450px;
    background: url(../wximages/WXZeroOrder14/banner.jpg) center top;
  }
  .smash {
    margin: 0 auto;
    width: 960px;
    height: 480px;
    .left {
      position: relative;
      float: left;
      width: 480px;
      height: 480px;
      cursor:pointer;
      img {
        display: block;
        &.shine {
          width: 480px;
          height: 480px;
          position: absolute;
          animation: shine 4s linear infinite normal;
        }
        &.egg{
          width: 480px;
          height: 480px;
        }
        &.hammer {
          top: 10%;
          right: 10%;
          position: absolute;
          transform-origin: right bottom;
          animation: hammer 1s linear infinite alternate;
        }
      }

    }
    .right {
      float: right;
      width: 480px;
      height: 480px;
      .title{
        height:100px;
        font-size:36px;
        text-align: center;
        color:#fff;
        line-height:100px;
        .peopleNum{
          font-size:48px;
          color:#f0d279;
        }
      }
      .showBox{
        height:360px;
        background: url(../wximages/WXZeroOrder14/roll.png) no-repeat center top;
        background-size:100% 100%;
        overflow: hidden;
      }
      .chance{
        margin-top:50px;
        margin-bottom:50px;
        font-size:32px;
        color:#de8738;
        text-align: center;
        .chanceNum{
          font-size:40px;
          color:#ec3838;
        }
      }
      .box{
        margin:0 auto;
        width:450px;
        height:210px;
        text-align:center;
        overflow: hidden;
        li{
          height:70px;
          line-height:70px;
          font-size:30px;
          color:#763c02;
          span{
            color:#ec3838;
          }
        }
      }
    }
  }
  .activityIntro {
    text-align: center;
  }
  .pop{
    display:none;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(2,2,2,0.5);


    .submit{
      position:relative;
      margin:160px auto;
      width:558px;
      height:953px;
      background: url(../wximages/WXZeroOrder14/submit.png);
      background-size:100% 100%;

      .prize{
        position:absolute;
        bottom:240px;
        width:100%;
        height:120px;
        p{
          margin:0;
          height:40px;
          line-height:40px;
          font-size:24px;
          text-align: center;
          .prizeNum{
            color:#c8372b;
            font-weight:bold;
          }
        }
      }

      .submitBox{
        position:absolute;
        bottom:80px;
        height:160px;
        width:100%;
        font-weight:bold;
        text-align: center;
        font-size:24px;
        .text{
          float:left;
          font-size:36px;
          width:100px;
          line-height:160px;
        }
        .box{
          margin-left:100px;
          height:100%;
          .inputBox{
            height:50%;
            line-height:80px;
            text-align: center;
            span{
              position:absolute;
              display:inline-block;
              margin-left:-33px;
              margin-top:30px;
              width:14px;
              height:14px;
              background: url(../wximages/WXZeroOrder14/off.png);
              cursor:pointer;
              &.on{
                background: url(../wximages/WXZeroOrder14/on.png);
              }
            }
            input{
              padding-left:1em;
              width:260px;
              height:55px;
              border:1px dotted #ec3838;
              border-radius:10px;
              font-size:24px;
              line-height:55px;
              outline:none;
              &.active{
                border:2px solid #ec3838;
              }
            }
          }
        }
      }


      .submitBtn{
        position:absolute;
        bottom:10px;
        left:50%;
        display:block;
        margin-left:-140px;
        width:280px;
        height:60px;
        text-align: center;
        line-height:60px;
        font-size:32px;
        color:#fff;
        border:2px solid transparent;
        box-shadow: 3px 3px transparent;
        border-radius:5px;
        background:#df4630;
        cursor:pointer;
        &:hover{
          font-weight:bold;
          border:2px solid #bf1f0a;
          box-shadow: 3px 3px #bf1f0a;
        }
      }
      .cannot{
        position:absolute;
        bottom:10px;
        left:50%;
        display:block;
        margin-left:-140px;
        width:280px;
        height:60px;
        text-align: center;
        line-height:60px;
        font-size:32px;
        color:#fff;
        border:2px solid transparent;
        box-shadow: 3px 3px transparent;
        border-radius:5px;
        background:#a0a0a0;
        cursor:default;
      }
    }
  }
}

